<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor 编程效率提升指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .section-title {
            position: relative;
            padding-bottom: 1rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
        }
        
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 24px;
            margin-bottom: 1rem;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 2rem;
            padding-bottom: 2rem;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e5e7eb;
        }
        
        .timeline-item::after {
            content: '';
            position: absolute;
            left: -4px;
            top: 8px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #667eea;
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            font-weight: 700;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        
        .highlight-box {
            background: linear-gradient(135deg, #f5f3ff 0%, #e9e4ff 100%);
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 1.5rem 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
        }
        
        td {
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
            background: white;
        }
        
        tr:last-child td {
            border-bottom: none;
        }
        
        .nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #d1d5db;
            margin: 0 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .nav-dot.active {
            background: #667eea;
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    <i class="fas fa-rocket mr-4"></i>
                    Cursor 编程效率提升指南
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">
                    掌握 AI 驱动的编程工具，显著提升开发效率与代码质量
                </p>
                <div class="flex justify-center space-x-2">
                    <span class="nav-dot active"></span>
                    <span class="nav-dot"></span>
                    <span class="nav-dot"></span>
                    <span class="nav-dot"></span>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <p class="text-lg leading-relaxed text-gray-700">
                    <span class="drop-cap">使</span>用 Cursor 的最终目标是提高编程效率和代码质量。本章将介绍一系列实用策略和最佳实践，帮助您充分发挥 Cursor 的潜力，显著提升开发工作流程的效率。
                </p>
            </div>
        </div>
    </section>

    <!-- 工作流优化 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-4xl font-bold mb-12 section-title">
                    <i class="fas fa-cogs mr-3 text-purple-600"></i>
                    8.1 工作流优化
                </h2>
                
                <p class="text-lg mb-8 text-gray-700">
                    合理规划和优化工作流是提高效率的关键，Cursor 提供了多种方式来支持个性化的高效工作流。
                </p>

                <!-- 任务自动化 -->
                <div class="bg-white rounded-xl shadow-lg p-8 mb-8 card-hover">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <div class="feature-icon mr-4">
                            <i class="fas fa-robot"></i>
                        </div>
                        任务自动化
                    </h3>
                    
                    <div class="grid md:grid-cols-3 gap-6 mb-8">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="font-bold text-lg mb-3 text-purple-700">
                                <i class="fas fa-cog mr-2"></i>任务配置
                            </h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><i class="fas fa-check text-green-500 mr-2"></i>创建 .vscode/tasks.json 定义自动化任务</li>
                                <li><i class="fas fa-check text-green-500 mr-2"></i>设置任务依赖和组合任务</li>
                                <li><i class="fas fa-check text-green-500 mr-2"></i>配置任务快捷键，一键触发常用操作</li>
                            </ul>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="font-bold text-lg mb-3 text-purple-700">
                                <i class="fas fa-tasks mr-2"></i>常见任务类型
                            </h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><i class="fas fa-hammer text-blue-500 mr-2"></i>构建任务：编译项目、打包应用</li>
                                <li><i class="fas fa-vial text-green-500 mr-2"></i>测试任务：运行单元测试、集成测试</li>
                                <li><i class="fas fa-cloud-upload-alt text-purple-500 mr-2"></i>部署任务：推送到各环境</li>
                                <li><i class="fas fa-search text-orange-500 mr-2"></i>代码检查：linter、格式化、类型检查</li>
                            </ul>
                        </div>
                        
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h4 class="font-bold text-lg mb-3 text-purple-700">
                                <i class="fas fa-magic mr-2"></i>AI 辅助任务创建
                            </h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><i class="fas fa-comment-dots text-indigo-500 mr-2"></i>描述您想要自动化的工作流程</li>
                                <li><i class="fas fa-code text-pink-500 mr-2"></i>AI 可以生成适当的任务配置</li>
                                <li><i class="fas fa-lightbulb text-yellow-500 mr-2"></i>帮助理解和调整复杂的任务设置</li>
                            </ul>
                        </div>
                    </div>

                    <div class="highlight-box">
                        <h4 class="font-bold text-lg mb-3">
                            <i class="fas fa-code mr-2"></i>示例任务配置（.vscode/tasks.json）
                        </h4>
                        <div class="code-block">
                            <pre>{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "构建项目",
      "type": "shell",
      "command": "mvn clean install",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$maven-compiler"]
    },
    {
      "label": "运行测试",
      "type": "shell",
      "command": "mvn test",
      "group": {
        "kind": "test",
        "isDefault": true
      }
    },
    {
      "label": "开发服务器",
      "type": "shell",
      "command": "mvn spring-boot:run -Dspring-boot.run.profiles=dev",
      "isBackground": true
    }
  ]
}</pre>
                        </div>
                    </div>
                </div>

                <!-- 快捷键与命令面板 -->
                <div class="bg-white rounded-xl shadow-lg p-8 mb-8 card-hover">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <div class="feature-icon mr-4">
                            <i class="fas fa-keyboard"></i>
                        </div>
                        快捷键与命令面板
                    </h3>
                    
                    <p class="text-gray-700 mb-6">
                        熟练使用快捷键和命令面板可以大幅提升操作速度：
                    </p>

                    <div class="overflow-x-auto">
                        <table>
                            <thead>
                                <tr>
                                    <th>功能</th>
                                    <th>Windows/Linux</th>
                                    <th>macOS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><i class="fas fa-robot mr-2 text-purple-600"></i>AI 补全</td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl+K</kbd></td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Cmd+K</kbd></td>
                                </tr>
                                <tr>
                                    <td><i class="fas fa-comments mr-2 text-blue-600"></i>AI 对话</td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl+L</kbd></td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Cmd+L</kbd></td>
                                </tr>
                                <tr>
                                    <td><i class="fas fa-terminal mr-2 text-green-600"></i>命令面板</td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl+Shift+P</kbd></td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Cmd+Shift+P</kbd></td>
                                </tr>
                                <tr>
                                    <td><i class="fas fa-file mr-2 text-orange-600"></i>快速文件打开</td>
                                    <td><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl+P</kbd></td>
                                    